<template>
  <div>
    <!-- banner图 -->
    <div class="header-img">
      <span class="header-img-text">河北省网联可信数据空间综合服务平台</span>
    </div>
    <div class="container">
      <!-- 需求发布 -->
      <div class="requirement-release">
        <p class="underline">发布流程</p>
        <div class="process-box bgc">
          <ul class="process">
            <li class="process-item">
              <span class="process-item-text">需求发布</span>
              <i class="icon el-icon-upload"></i>
            </li>
            <li class="arrow">
              <i class="arrow el-icon-d-arrow-right"></i>
            </li>
            <li class="process-item">
              <span class="process-item-text">平台受理</span>
              <i class="icon el-icon-s-platform"></i>
            </li>
            <li class="arrow">
              <i class="arrow el-icon-d-arrow-right"></i>
            </li>
            <li class="process-item">
              <span class="process-item-text">服务商参与</span>
              <i class="icon el-icon-s-custom"></i>
            </li>
            <li class="arrow">
              <i class="arrow el-icon-d-arrow-right"></i>
            </li>
            <li class="process-item">
              <span class="process-item-text">成交登记</span>
              <i class="icon el-icon-s-claim"></i>
            </li>
            <li class="arrow">
              <i class="arrow el-icon-d-arrow-right"></i>
            </li>
            <li class="process-item">
              <span class="process-item-text">交易所选择</span>
              <i class="icon el-icon-s-flag"></i>
            </li>
            <li class="arrow">
              <i class="arrow el-icon-d-arrow-right"></i>
            </li>
            <li class="process-item">
              <span class="process-item-text">资产登记</span>
              <i class="icon el-icon-edit-outline"></i>
            </li>
            <li class="arrow">
              <i class="arrow el-icon-d-arrow-right"></i>
            </li>
            <li class="process-item">
              <span class="process-item-text">资源入表</span>
              <i class="icon el-icon-s-order"></i>
            </li>
            <li class="arrow">
              <i class="arrow el-icon-d-arrow-right"></i>
            </li>
            <li class="process-item">
              <span class="process-item-text">金融服务</span>
              <i class="icon el-icon-s-cooperation"></i>
            </li>
          </ul>
        </div>
      </div>
      <!-- 需求列表 -->
      <div class="requirement-list bgc">
        <!-- 项目搜索 -->
        <el-form
          ref="queryParams"
          :model="queryParams"
          :inline="true"
          label-width="50px"
          style="margin-left: 15px"
        >
          <el-form-item style="margin-left: 15px" prop="projectName">
            <el-input
              placeholder="请输入项目名称"
              v-model="queryParams.projectName"
            ></el-input>
          </el-form-item>
          <el-form-item style="margin-left: 15px" prop="industry">
            <div class="block">
              <el-cascader
                v-model="queryParams.code"
                :props="options"
                :show-all-levels="false"
                @change="handleIndustryChange"
                placeholder="请选择所属行业"
                clearable
              ></el-cascader>
            </div>
          </el-form-item>
          <el-form-item style="margin-left: 15px" prop="area">
            <div class="block">
              <el-cascader
                v-model="queryParams.categoryId"
                :props="addressList"
                @change="handleAreaChange"
                placeholder="请选择所在地区"
                clearable
              ></el-cascader>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="small"
              @click="search"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
        <!-- 骨架屏 -->
        <el-skeleton :loading="loading">
          <template slot="template">
            <div class="list-box">
              <ul class="list skeleton-list">
                <li class="list-item" v-for="item in 3" :key="item">
                  <div class="box-card">
                    <div class="header">
                      <el-skeleton-item variant="rect" style="width:300px;margin-right: 15px"/>
                      <el-skeleton-item variant="rect" style="width:100px;margin-right: 15px"/>
                      <el-skeleton-item variant="rect" style="width:100px;margin-right: 15px"/>
                    </div>
                    <div class="content">
                      <el-skeleton-item variant="rect" style="margin-bottom: 15px"/>
                      <el-skeleton-item variant="rect" style="margin-bottom: 15px"/>
                      <div class="content-footer">
                        <div class="footer-left">
                          <el-skeleton-item variant="rect" style="margin-right: 15px"/>
                          <el-skeleton-item variant="rect" style="margin-right: 15px"/>
                        </div>
                        <el-skeleton-item
                          variant="rect"
                          style="width: 130px; height: 35px"
                        />
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </template>
        </el-skeleton>
        <!-- 项目列表 -->
        <div class="list-box">
          <el-empty v-if="list.length === 0" :image-size="200"></el-empty>
          <ul v-else class="list">
            <li class="list-item" v-for="(item, index) in list" :key="index">
              <div class="box-card">
                <div class="header">
                  <span class="header-title">{{ item.projectName }}</span>
                  <div class="company-type">{{ item.industry }}</div>
                  <div class="status" v-if="item.projectStatus === '0'">
                    进行中
                  </div>
                  <div class="status" v-else>已完成</div>
                </div>
                <div class="content">
                  <div class="image">
                    <img src="../assets/image/icon-company2.png" alt="" />
                    <span class="company">{{ item.bodyName }}</span>
                  </div>
                  <p>{{ item.projectDescribe }}</p>
                  <div class="content-footer">
                    <div class="footer-left">
                      <span
                        ><img src="../assets/image/icon-time.png" alt="" />{{
                          item.createTime | formDate
                        }}</span
                      >
                      <span
                        ><img src="../assets/image/icon-view.png" alt="" />{{
                          item.visitCount
                        }}次</span
                      >
                    </div>
                    <div class="footer-right" @click="goDetails(item.id)">
                      立即前往
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
          <!-- 分页 -->
          <div class="pagination">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryParams.pageNumber"
              :page-sizes="[1, 2, 3, 4, 5]"
              :page-size="queryParams.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- 页面底部 -->
    <div>
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { ProgictList, getIndustryById, address, AddViews } from "../api/api";
import { Result } from "element-ui";
export default {
  data() {
    return {
      loading: true, // 添加加载状态
      projectstatus: 0,
      // 查询请求参数
      queryParams: {
        pageSize: 3,
        pageNumber: 1,
        projectName: "",
        categoryId: "",
        code: "",
      },
      // 经营地址列表
      addressList: {
        lazy: true,
        async lazyLoad(node, resolve) {
          const { level, value } = node;
          const path = value || 0; // 这里替换为你需要的动态值

          try {
            // 发送请求获取数据，拼接路径
            const response = await address(path);
            // 检查响应数据
            // console.log('Response data:', response);
            // 整理数据
            const showData = response.data.data.map((item) => ({
              value: item.code,
              label: item.name,
              leaf: level >= 2, // 假设三级级联，超过二级的节点为叶子节点
            }));
            // 注入组件需要展示的数据
            resolve(showData);
          } catch (error) {
            // 发生错误时调用 resolve 返回空数组
            resolve([]);
          }
        },
      },
      // 所属行业列表
      options: {
        lazy: true,
        async lazyLoad(node, resolve) {
          const { level, value } = node;
          const path = value || 0; // 这里替换为你需要的动态值

          try {
            // 发送请求获取数据，拼接路径
            const response = await getIndustryById(path);
            // 检查响应数据
            // console.log('Response data:', response);
            // 整理数据
            const showData = response.data.data.data.map((item) => ({
              value: item.categoryId,
              label: item.categoryName,
              leaf: level >= 1, // 假设三级级联，超过二级的节点为叶子节点
            }));
            // 注入组件需要展示的数据
            resolve(showData);
          } catch (error) {
            // 发生错误时调用 resolve 返回空数组
            resolve([]);
          }
        },
      },
      total: 0,
      // 项目列表
      list: [],
      value: {},
      token: "",
      categoryId: 0,
    };
  },
  props: {},
  computed: {},
  methods: {
    search() {
      this.getList();
    },
    getList() {
      this.queryParams.categoryId += "";
      this.queryParams.code += "";
      const { pageSize, pageNumber, projectName, categoryId, code } =
        this.queryParams;
      this.loading = true; // 开始加载时设置为true
      ProgictList(pageSize, pageNumber, projectName, categoryId, code)
        .then((result) => {
          this.list = result.data.data.rows;
          this.total = Number(result.data.data.total);
        })
        .catch((err) => {})
        .finally(() => {
          this.loading = false; // 加载完成后设置为false
        });
    },
    goDetails(id) {
      this.$router.push(`/ProjectDetails?id=${id}`);
      AddViews(id).then((res) => {});
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNumber = val;
      this.getList();
    },
    handleIndustryChange(value) {},
    handleAreaChange(value) {},
  },
  filters: {
    formDate(val) {
      const dt = new Date(val);
      const y = dt.getFullYear();
      const m = (dt.getMonth() + 1 + "").padStart(2, "0");
      const d = (dt.getDate() + "").padStart(2, "0");
      return `${y}-${m}-${d}`;
    },
  },
  created() {
    this.getList();
  },
  mounted() {},
};
</script>

<style scoped lang="less">
* {
  margin: 0;
  // padding: 0;
  box-sizing: border-box;
}

ul,
li {
  list-style: none;
}

.header-img {
  height: 300px;
  background-image: url("../assets/image/xuqiu.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}
.header-img::after {
  content: "不忘初心，推动数字经济高质量发展";
  font-size: 65px;
  color: #fff;
  position: absolute;
  top: 50px;
  left: 400px;
  white-space: pre-line;
  font-weight: 500;
}
.header-img-text {
  position: absolute;
  top: 150px;
  left: 600px;
  font-size: 35px;
  color: #fff;
}

.container {
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 100%;
  margin: 25px auto;

  .bgc {
    border-radius: 10px;
    box-shadow: -2px 2px 5px #e0e9fd;
    background-color: #f9fbff;
  }

  .requirement-release {
    width: 1296px;
    margin: 20px 0;
    padding: 15px 5px 15px 0;

    .underline {
      width: 80px;
      position: relative;
      font-size: 20px;
      font-weight: bold;
      color: #35445e;
    }

    // .underline::after {
    //   content: "";
    //   position: absolute;
    //   bottom: -5px;
    //   left: 5px;
    //   width: 100%;
    //   height: 6px;
    //   border-radius: 25px;
    //   background: linear-gradient(to right, #5ca6f9, #f9fcfe); /* 渐变色 */
    // }
    .process-box {
      margin-top: 5px;
      padding: 15px;
      height: 110px;
      // background-color: #fff;
      // border-radius: 10px;
    }

    .process {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100%;
    }

    .process-item {
      height: 100%;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: space-between;
      padding: 10px;
      // box-shadow: 2px -2px 6px #f9fbff;
    }

    .arrow {
      font-size: 18px;
      font-weight: bold;
      color: #0f40f5;
    }

    .process-item-text {
      position: relative;
      color: #0f40f5;
      font-size: 18px;
      font-weight: bold;
    }

    // .process-item-text::after {
    //   z-index: 1;
    //   content: "";
    //   position: absolute;
    //   bottom: -5px;
    //   left: -8px;
    //   width: 100%;
    //   height: 6px;
    //   border-radius: 25px;
    //   background: linear-gradient(to right, #5ca6f9, #f9fcfe); /* 渐变色 */
    // }
    .icon {
      text-align: center;
      width: 50px;
      font-size: 35px;
      color: #0f40f5;
    }
  }

  .requirement-list {
    width: 1296px;
    padding-top: 15px;

    .list-box {
      margin-top: 15px;
      padding-bottom: 30px;
      display: flex;
      align-items: center;
      flex-direction: column;
      .skeleton-list {
        width: 100%;
        height:192px
      }
      .list {
        width: 100%;
      }

      .list .list-item {
        margin-bottom: 20px;
        background-color: #fff;
        padding: 15px 0;

        .box-card {
          box-shadow: 0 0 5px #c7c7c7;
          padding: 15px;
          padding-right: 40px;

          .header {
            display: flex;
            // width: 30%;
            align-items: center;
            justify-content: flex-start;

            .header-title {
              width: 180px;
              font-size: 20px;
              color: #35445e;
              font-weight: bold;
              margin-right: 5px;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .company-type {
              margin-right: 8px;
              padding: 0 5px;
              color: #fff;
              font-size: 12px;
              font-weight: bold;
              min-width: 65px;
              height: 25px;
              text-align: center;
              line-height: 25px;
              border-radius: 5px;
              background: linear-gradient(to right, #1244f5, #b5dcf6);
            }

            .status {
              color: #fff;
              font-size: 12px;
              font-weight: bold;
              width: 65px;
              height: 25px;
              text-align: center;
              line-height: 25px;
              border-radius: 5px;
              background: #1244f5;
            }
          }

          .content {
            display: flex;
            align-items: left;
            flex-direction: column;
            justify-content: space-between;
            margin-top: 10px;

            img {
              width: 20px;
              height: 20px;
              vertical-align: middle;
            }

            .image {
              display: flex;
              align-items: bottom;
            }

            p {
              width: 1000px;
              font-size: 14px;
              color: #9a9a9a;
              margin-top: 10px;
              text-indent: 2em;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .company {
              font-size: 16px;
              color: #0f40f5;
              font-weight: bold;
              vertical-align: bottom;
            }

            .content-footer {
              display: flex;
              align-items: center;
              justify-content: space-between;

              .footer-left {
                color: #9b9b9b;
                font-size: 12px;
                width: 200px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 25px;

                img {
                  width: 20px;
                  height: 20px;
                }
              }

              .footer-right {
                width: 130px;
                height: 35px;
                font-size: 14px;
                font-weight: bold;
                color: #fff;
                text-align: center;
                line-height: 35px;
                border-radius: 25px;
                background-color: #4c7bfe;
                margin-right: 15px;
                margin-bottom: 10px;
              }

              .footer-right:hover {
                cursor: pointer;
              }
            }
          }
        }
      }

      .pagination {
        margin: 20px;
        // background-color: #fff;
        padding: 5px;
      }
    }
  }
}
</style>